<template>
  <div class="clearfix sAGu-con stockUD-con">
    <el-col :span="11" class="left-col">
      <div class="small-con left-con">
        <h3 class="mPanel-title title">
          <a href="http://quotes.money.163.com/old/#query=leadIndustry&amp;DataType=industryPlate&amp;sort=PERCENT&amp;order=desc&amp;count=25&amp;page=0" target="_blank" class="read-more">
            涨幅排行
          </a>
        </h3>
        <el-table :data="$store.state.sAUpList" class="td-fontsize td-fontcolor-red  stockTable left-table">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column label="股票名称">
            <template slot-scope="scope">
              <a :href="['https://money.163.com/'+scope.row.code+'.html']" target="__blank" class="hstock h_hstockName">
              {{scope.row.name}}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最新价"></el-table-column>
          <el-table-column prop="updown" label="涨跌额"></el-table-column>
          <el-table-column prop="percent" label="涨跌幅"></el-table-column>
        </el-table>
      </div>
      <div class="small-con left-con">
        <h3 class="mPanel-title title">
          <a href="http://quotes.money.163.com/old/#query=leadIndustry&amp;DataType=industryPlate&amp;sort=PERCENT&amp;order=desc&amp;count=25&amp;page=0" target="_blank" class="read-more">
            5分钟涨幅排行
          </a>
        </h3>
        <el-table :data="$store.state.sA5MinUpList" class="td-fontsize td-fontcolor-red  stockTable left-table">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column label="股票名称">
            <template slot-scope="scope">
              <a :href="['https://money.163.com/'+scope.row.code+'.html']" target="__blank" class="hstock h_hstockName">
              {{scope.row.name}}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最新价"></el-table-column>
          <el-table-column prop="updown" label="涨跌额"></el-table-column>
          <el-table-column prop="percent" label="涨跌幅" :formatter="handlePercent"></el-table-column>
        </el-table>
      </div>
      <div class="small-con left-con">
        <h3 class="mPanel-title title">
          <a href="http://quotes.money.163.com/old/#query=leadIndustry&amp;DataType=industryPlate&amp;sort=PERCENT&amp;order=desc&amp;count=25&amp;page=0" target="_blank" class="read-more">
            成交额排行
          </a>
        </h3>
        <el-table :data="$store.state.sATurnoverList" class="td-fontsize td-fontcolor-red  stockTable left-table">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column label="股票名称">
            <template slot-scope="scope">
              <a :href="['https://money.163.com/'+scope.row.code+'.html']" target="__blank" class="hstock h_hstockName">
              {{scope.row.name}}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最新价"></el-table-column>
          <el-table-column prop="updown" label="涨跌额"></el-table-column>
          <el-table-column prop="percent" label="涨跌幅"></el-table-column>
        </el-table>
      </div>
      <div class="small-con left-con">
        <h3 class="mPanel-title title">
          <a href="http://quotes.money.163.com/old/#query=leadIndustry&amp;DataType=industryPlate&amp;sort=PERCENT&amp;order=desc&amp;count=25&amp;page=0" target="_blank" class="read-more">
            量比排行
          </a>
        </h3>
        <el-table :data="$store.state.sALBList" class="td-fontsize td-fontcolor-red  stockTable left-table">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column label="股票名称">
            <template slot-scope="scope">
              <a :href="['https://money.163.com/'+scope.row.code+'.html']" target="__blank" class="hstock h_hstockName">
              {{scope.row.name}}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最新价"></el-table-column>
          <el-table-column prop="updown" label="涨跌额"></el-table-column>
          <el-table-column prop="percent" label="涨跌幅"></el-table-column>
        </el-table>
      </div>
    </el-col>
    
    <el-col :span="11" class="right-col">
      <div class="small-con right-con">
        <h3 class="mPanel-title title">
          <a href="http://quotes.money.163.com/old/#query=leadIndustry&amp;DataType=industryPlate&amp;sort=PERCENT&amp;order=desc&amp;count=25&amp;page=0" target="_blank" class="read-more">
            跌幅排行
          </a>
        </h3>
        <el-table :data="$store.state.sADownList" class="td-fontsize td-fontcolor-red  stockTable right-table">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column label="股票名称">
            <template slot-scope="scope">
              <a :href="['https://money.163.com/'+scope.row.code+'.html']" target="__blank" class="hstock h_hstockName">
              {{scope.row.name}}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最新价"></el-table-column>
          <el-table-column prop="updown" label="涨跌额"></el-table-column>
          <el-table-column prop="percent" label="涨跌幅"></el-table-column>
        </el-table>
      </div>
      <div class="small-con right-con">
        <h3 class="mPanel-title title">
          <a href="http://quotes.money.163.com/old/#query=leadIndustry&amp;DataType=industryPlate&amp;sort=PERCENT&amp;order=desc&amp;count=25&amp;page=0" target="_blank" class="read-more">
            5分钟跌幅排行
          </a>
        </h3>
        <el-table :data="$store.state.sA5MinDownList" class="td-fontsize td-fontcolor-red  stockTable right-table">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column label="股票名称">
            <template slot-scope="scope">
              <a :href="['http://localhost:8080/#/market/'+scope.row.code]" target="__blank" class="hstock h_hstockName">
              {{scope.row.name}}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最新价"></el-table-column>
          <el-table-column prop="updown" label="涨跌额"></el-table-column>
          <el-table-column prop="percent" label="涨跌幅"></el-table-column>
        </el-table>
      </div>
      <div class="small-con right-con">
        <h3 class="mPanel-title title">
          <a href="http://quotes.money.163.com/old/#query=leadIndustry&amp;DataType=industryPlate&amp;sort=PERCENT&amp;order=desc&amp;count=25&amp;page=0" target="_blank" class="read-more">
            换手率排行
          </a>
        </h3>
        <el-table :data="$store.state.sAHSList" class="td-fontsize td-fontcolor-red  stockTable right-table">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column label="股票名称">
            <template slot-scope="scope">
              <a :href="['http://localhost:8080/#/market/'+scope.row.code]" target="__blank" class="hstock h_hstockName">
              {{scope.row.name}}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最新价"></el-table-column>
          <el-table-column prop="updown" label="涨跌额"></el-table-column>
          <el-table-column prop="percent" label="涨跌幅"></el-table-column>
        </el-table>
      </div>
      <div class="small-con right-con">
        <h3 class="mPanel-title title">
          <a href="http://quotes.money.163.com/old/#query=leadIndustry&amp;DataType=industryPlate&amp;sort=PERCENT&amp;order=desc&amp;count=25&amp;page=0" target="_blank" class="read-more">
            振幅排行
          </a>
        </h3>
        <el-table :data="$store.state.sAZFList" class="td-fontsize td-fontcolor-red  stockTable right-table">
          <el-table-column type="index" label="排名"></el-table-column>
          <el-table-column label="股票名称">
            <template slot-scope="scope">
              <a :href="['http://localhost:8080/#/market/'+scope.row.code]" target="__blank" class="hstock h_hstockName">
              {{scope.row.name}}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最新价"></el-table-column>
          <el-table-column prop="updown" label="涨跌额"></el-table-column>
          <el-table-column prop="percent" label="涨跌幅"></el-table-column>
        </el-table>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
   methods: {
     handlePercent:function(row,column){
      return ((row[column.property])*100).toFixed(2)+'%'
    },
   }
}
</script>

<style>
.stockTable {
  height:385px;
  /* overflow-y: auto; */
}
.left-con {
  margin-bottom: 30px;
  padding-right:25px;
  border-right:1px solid  #f5eeee;

}
.right-con {
  margin-bottom: 30px;
  padding-left:25px;

}
h3 {
  margin-left:7px;
}
.vertical_splite {
  width: 1000px;
  height: 1px;
  margin:20px;
  background-color: #2b2b2b;
}
</style>